<script>
    import { onMount } from 'svelte';
    let value = 'world';
    let a = 1;
    let b = 2;
    let yes = false;
    let div;
    let scoops = 1;
    let flavours = ['Mint choc chip'];
    let value1 = `Some words are *italic*, some are **bold**`;
    
    let questions = [
		{ id: 1, text: `Where did you go to school?` },
		{ id: 2, text: `What is your mother's name?` },
		{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
	];

	let selected;

	let answer = '';

	function handleSubmit() {
		alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
    }
    
    onMount(() => {
        console.log(div);
    })
</script>

<ol>
    <li>
        <input bind:value={value}>
        <h1>Hello {value}!</h1>
    </li>
    <li>
        <label>
            <input type=number  bind:value={a} min=0 max=10>
            <input type=range  bind:value={a} min=0 max=10>
        </label>
        
        <label>
            <input type=number  bind:value={b} min=0 max=10>
            <input type=range  bind:value={b} min=0 max=10>
        </label>
        <p>{a} + {b} = {a + b}</p>
    </li>
    <li>
        <label>
            <input type=checkbox bind:checked={yes}>
            Yes! Send me regular email spam
        </label>
        {#if yes}
            <p>Thank you. We will bombard your inbox and sell your personal details.</p>
        {:else}
            <p>You must opt in to continue. If you're not paying, you're the product.</p>
        {/if}
        <button disabled={!yes}>
            Subscribe
        </button>
    </li>
    <li>
        <!-- group-radio -->
        <label>
            <input type=radio bind:group={scoops} value={1}>
            One scoop
        </label>
        <label>
            <input type=radio bind:group={scoops} value={2}>
            Two scoops
        </label>
        <label>
            <input type=radio bind:group={scoops} value={3}>
            Three scoops
        </label>
    </li>
    <li>
        <!-- group-checkbox -->
        <label>
            <input type=checkbox bind:group={flavours} value="Cookies and cream">
            Cookies and cream
        </label>
        <label>
            <input type=checkbox bind:group={flavours} value="Mint choc chip">
            Mint choc chip
        </label>
        <label>
            <input type=checkbox bind:group={flavours} value="Raspberry ripple">
            Raspberry ripple
        </label>
    </li>
    <li>
        {#each flavours as flavour}
            <label>
                <input type=checkbox bind:group={flavours} value={flavour}>
                {flavour}
            </label>
        {/each}
    </li>
    <li>
        <textarea bind:value={value1}></textarea>

        {@html value1}
    </li>
    <li>
        <form on:submit|preventDefault={handleSubmit}>
            <select bind:value={selected}>
                {#each questions as question}
                    <option value={question}>
                        {question.text}
                    </option>
                {/each}
            </select>
        
            <input bind:value={answer}>
        
            <button disabled={!answer} type=submit>
                Submit
            </button>
        </form>
        
        <p>selected question {selected ? selected.id : '[waiting...]'}</p>
    </li>
    <li>
        <!-- 媒体组件 -->
    </li>
    <li>
        <!-- 类似vue中ref -->
        获取dom节点
        <div bind:this={div}></div>
    </li>
</ol>